@mixin avatar($size, $radius) {
	width: $size;
	height: $size;
	border-radius: $radius;

	img {
		width: 100%;
		height: 100%;
		border-radius: $radius;
	}
}

@mixin image($size, $radius) {
	width: $size;
	height: $size;
	border-radius: $radius;

	img {
		width: 100%;
		height: 100%;
		border-radius: $radius;
	}
}

@mixin flex-box($gap) {
	display: flex;
	gap: $gap;
}
@mixin flex-column-box($gap) {
	display: flex;
	flex-direction: column;
	gap: $gap;
}

@mixin flex-center($gap) {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: $gap;
}

@mixin flex-between($gap) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: $gap;
}

@mixin flex-around($gap) {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: $gap;
}

@mixin close-icon {
	.icon {
		position: absolute;
		top: 20px;
		right: 40px;
	}

	.icon:hover {
		cursor: pointer;
	}
}

@mixin icon-rotate {
	.rotate-icon {
		animation: rotate 1s linear infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
}
